import { UserSelect, ImgHolder } from 'comps/common';
import { Form, Table, Button, Icon, Select, Popconfirm, message, Row, Col } from 'antd';
import * as React from 'react';
import _ from 'lodash';

const Option = Select.Option;

let NewMemberForm = ({ fetching, onAddMembers, style, form: { getFieldProps, getFieldValue, resetFields } }) => {
  const onNewMembers = () => {
    const userIds = getFieldValue('userIds');
    if (_.isEmpty(userIds)) {
      return;
    }
    onAddMembers(userIds);
    resetFields();
  };

  return (
    <Row style={style}>
      <Col span='21'>
        <UserSelect multiple style={{ width: '100%' }} {...getFieldProps('userIds', { initialValue: [] })}/>
      </Col>
      <Col span='3' style={{ textAlign: 'right' }}>
        <Button loading={fetching} type='primary' onClick={onNewMembers}>添加成员</Button>
      </Col>
    </Row>
  );
};
NewMemberForm = Form.create()(NewMemberForm);

class TeamMembers extends React.Component {
  onMemberRoleChange(userId, value) {
    const enable = value === 'LEADER';
    this.props.onSetLeader(userId, enable);
  }

  onMemberRemove(userId) {
    const { loginUser, members, isTeamLeader, onRemoveMember } = this.props;
    if (isTeamLeader && userId === loginUser.id) {
      // 自己移除自己，需要看一下自己是不是惟一一个 leader
      if (members.filter(member => member.leader).length === 1) {
        message.warning('无法从开发组中移除最后一个 team leader');
        return;
      }
    }
    onRemoveMember(userId);
  }

  render() {
    const { members, loginUser, isTeamLeader, memberAddFetching, onAddMembers } = this.props;

    const columns = [
      {
        title: '成员', key: 'info', render: (t, { id, avatar, nick, email }) => {
          return (
            <div className='member-info'>
              <ImgHolder src={avatar} className='member-avatar' rect='50x50' random='yes' text={nick.substring(0, 1)}/>
              <a className='member-nick' href='layer:user' data-layer-props={JSON.stringify({ id })}>{nick}</a>
              {loginUser.id === id ? <span className='member-self'>你自己</span> : undefined}
              <span className='member-email'>{email}</span>
            </div>
          );
        }
      },
      {
        title: '', key: 'operator', render: (t, { id, leader }) => {
          if (isTeamLeader) {
            return (
              <span className='horizontal-group'>
                {loginUser.id === id
                  ? <span>{leader ? '管理员' : '成员'}</span>
                  : (
                    <Select style={{ width: '80px' }} value={leader ? 'LEADER' : 'MEMBER'}
                      onChange={(value) => this.onMemberRoleChange(id, value)}
                    >
                      <Option value='LEADER'>管理员</Option>
                      <Option value='MEMBER'>成员</Option>
                    </Select>
                  )
                }
                <Popconfirm title='确认从开发组中移除吗？' onConfirm={() => this.onMemberRemove(id)}>
                  {loginUser.id === id
                    ? <Button><Icon type='logout'/> 退出</Button>
                    : <Button><Icon type='minus'/> 移除</Button>
                  }
                </Popconfirm>
              </span>
            );
          }
          return (
            <span className='horizontal-group'>
              <span>{leader ? '管理员' : '成员'}</span>
              {loginUser.id === id
                ? (
                  <Popconfirm>
                    <Button><Icon type='logout'/> 退出</Button>
                  </Popconfirm>
                )
                : undefined
              }
            </span>
          );
        }
      }
    ];

    return (
      <div>
        <NewMemberForm style={{ marginBottom: '20px' }} fetching={memberAddFetching} onAddMembers={onAddMembers}/>
        <Table className='team-members' dataSource={members} columns={columns} rowKey={record => record.id}
          pagination={false}
        />
      </div>
    );
  }
}

export default TeamMembers;
